<template>
  <div>
    <div class="header">
      <span>基本信息</span>
      <el-button type="primary" plain size="mini">收缩</el-button>
    </div>
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px">
      <el-form-item label="所属公司" prop="company" required>
        <el-select v-model="temp.companyId" placeholder="请选择所属公司" style="width: 300px" clearable>
          <el-option v-for="item in companyList" :key="item.id" :label="item.cnName || item.cnShortName" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="客户类别" prop="catalog" required>
        <el-select v-model="temp.catalog" placeholder="请选择客户类别" style="width: 300px" clearable>
          <el-option v-for="item in customerCategoryOptions" :key="item.id" :label="item.enName" :value="item.enName" />
        </el-select>
      </el-form-item>

      <el-form-item label="客户代码" prop="code" required>
        <el-input v-model.trim="temp.code" autocomplete="off" />
      </el-form-item>
      <el-form-item label="简称" prop="shortName">
        <el-input v-model.trim="temp.shortName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="全称" prop="fullName">
        <el-input v-model.trim="temp.fullName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="财务系统编号" prop="ifsCode">
        <el-input v-model.trim="temp.ifsCode" autocomplete="off" />
      </el-form-item>
      <el-form-item label="飞机号" prop="aircraftNumber">
        <el-select multiple filterable v-model="temp.aircraftNumbers" placeholder="请选择飞机">
          <el-option v-for="item in planeList" :key="item.id" :label="item.fjzch" :value="item.fjzch" />
        </el-select>
        <!-- planeList -->
      </el-form-item>
      <el-form-item label="客户类型" prop="type">
        <el-select v-model="temp.type" placeholder="请选择客户类型">
          <el-option v-for="item in customerTypeOptions" :key="item.id" :label="item.enName" :value="item.enName" />
        </el-select>
      </el-form-item>
      <el-form-item label="地址（英文）" prop="enAddress">
        <el-input v-model.trim="temp.enAddress" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址（中文）" prop="cnAddress">
        <el-input v-model.trim="temp.cnAddress" autocomplete="off" />
      </el-form-item>
      <el-form-item label="网址" prop="website">
        <el-input v-model.trim="temp.website" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="temp.status" placeholder="请选择状态">
          <el-option v-for="item in customerStatusOptions" :key="item.value" :label="item.value" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { customerTypeKV, customerCategoryKV, customerStatusOptions, customerStatusKV } from '@/utils/options'
import { createCustomer, queryCompany, viewCustomer, modifyCustomer } from '@/api/client'
import { fetchList as getAllPlane } from '@/api/plane'
import { querySystemCode } from '@/api/code'
import { fetchList as getUsers } from '@/api/user'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

const defaultForm = {
  status: 'In Service',
  companyId: 1,
  catalog: '',
  code: '',
  fullName: '',
  shortName: '',
  ifsCode: '',
  aircraftNumber: [],
  type: '',
  cnAddress: '',
  enAddress: '',
  website: ''
}

export default {
  name: 'ClientDetail',
  components: { Pagination },
  filters: {},
  props: { op: { type: String, default: 'edit' } },
  data() {
    return {
      tableData: [],
      total: 0,
      listQuery: {
        customerId: '',
        limit: 10,
        page: 1,
        type: '' // 类型(0:收入 1:支出)
      },
      activeName: 'first',
      drawer: false,
      worksId: null,
      worksName: '',
      typeOptions: [
        { key: '0', value: '收入', sign: '+' },
        { key: '1', value: '支出', sign: '-' }
      ],
      customerTypeOptions: [],
      customerTypeKV,
      customerCategoryOptions: [],
      customerCategoryKV,
      customerStatusOptions,
      customerStatusKV,
      temp: Object.assign({}, defaultForm),
      rules: {},
      isEdit: true,
      id: 0,
      usersList: [],
      companyList: [],
      planeList: []
    }
  },

  created() {
    // this.queryCompany()
    // this.getCustomerCategoryOptions()
    // this.getCustomerTypeOptions()
    // this.getAllPlane()
    // this.getUsers()
    const id = this.$route.params && this.$route.params.id
    if (id !== '0') {
      this.id = id
      this.viewCustomer()
    } else {
      this.isEdit = false
    }
    console.log('this.isEdit==', this.isEdit)
  },
  methods: {
    // 得到列表
    async viewCustomer() {
      viewCustomer({ id: this.id }).then((response) => {
        this.temp = response.data
      })
    },
    async getUsers() {
      getUsers({ page: 1, limit: 100 }).then((response) => {
        this.usersList = response.data.items
      })
    },
    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.fetchList()
    },
    add() {
      console.log('addaddaddadd')
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createCustomer(this.temp).then((response) => {
            this.$message.success('添加成功')
            this.$router.push('/client/index')
          })
        }
      })
    },
    save() {
      modifyCustomer(this.temp).then((response) => {
        this.$message.success('更改成功')
      })

      //
    },
    queryCompany() {
      queryCompany({}).then((res) => {
        this.companyList = res.data.filter((item) => item.id == 1)
      })
    },
    getCustomerCategoryOptions() {
      querySystemCode({ baseIds: [56] }).then((response) => {
        this.customerCategoryOptions = response.data
      })
    },

    getCustomerTypeOptions() {
      querySystemCode({ baseIds: [1080] }).then((response) => {
        this.customerTypeOptions = response.data
      })
    },
    getAllPlane() {
      getAllPlane({ page: 1, limit: 999 }).then((response) => {
        this.planeList = response.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  border-left: 2px solid #409eff;
  margin-bottom: 10px;

  padding: 0 10px;
  line-height: 30px;
  span {
    padding: 4px 0;
  }
}
</style>
